<template>
	<view>
		<drag-box
		:pos_x="pos_x" 
		:pos_y="pos_y" 
		:start_scale="start_scale" 
		:opa="opa" 
		:drag_able="drag_able"
		:stop_here="stop_here"
		@locationChanged="locationChanged"
		@scaleChanged="scaleChanged"
		>
			<view class="sin">
				<view class="sin-tx">
					<view class="tx">
						<view class="tx-img"><image style="width: 100%; height: 100%;" :src="safeGet(left, 'header', example ? '/static/tx.jpg' : '')"></image></view>
						<view class="ls">{{safeGet(left, 'user_cpt_temp.win_count', 0)}}连胜</view>
					</view>
					<view class="name">{{safeGet(left, 'nick_name', '左边')}}</view>
				</view>
				<view class="blood-right">
					<blood  :left_num="safeGet(left, 'user_cpt_temp.coins', 0)" :right_num="safeGet(right, 'user_cpt_temp.coins', 0)"/>
					<view class="blood-sin">
						<view class="sin-left">
							<view class="sin-gift"><image style="width: 100%; height: 100%;" :src="!use_user_icon || left == null ? '../../static/nzb.png' : safeGet(left, 'gift_icon', '')"></image></view>
							<view class="sin-text">继续表演</view>
						</view>
						<view class="time">
							<view>第{{rounds}}轮</view>
							<view>{{over_time_str}}</view>
						</view>
						<view class="sin-right">
							<view class="sin-text">遗憾离场</view>
							<view class="sin-gift"><image style="width: 100%; height: 100%;" :src="!use_user_icon || right == null ? '../../static/rqp.png' : safeGet(right, 'gift_icon', '')"></image></view>
						</view>
					</view>
				</view>
			</view>
		</drag-box>
	</view>
</template>

<script>
	
	import dragBox from '@/components/drag-box/drag-box.vue'
	import blood from '@/components/blood/blood.vue'
	import { safeGet } from '@/safeGet'
	
	export default {
		name:"blood-sin",
		components: {
			dragBox,
			blood
		},
		props: {
			pos_x: { type: Number, default: 0 },
			pos_y: { type: Number, default: 0 },
			start_scale: { type: Number, default: 1 },
			opa: { type: Number, default: 1 },
			drag_able: { type: Boolean, default: true},
			stop_here: { type: Boolean, default: false},
			cpt_id: {
				type: Number,
				default: 0
			},
			rounds: {
				type: Number,
				default: 0
			},
			use_user_icon: {
				type: Boolean,
				default: false
			},
			example: {
				type: Boolean,
				default: false
			},
			over_time: { type: Number, default: 0 }
		},
		data() {
			return {
				over_time_str: '00:00',
				left: null,
				right: null
			};
		},
		watch: {
			over_time(newVal) {
				this.over_time_str = this.formatTime(newVal)
			}
		},
		created() {
			this.over_time_str = this.formatTime(this.over_time)
			this.configData()
			window.electronAPI.noticeUserCptTempChanged((from) => {
				console.log(from)
				if (from != 'blood-sin') {
					this.configData()
				}
			})
		},
		beforeDestroy() {
			window.electronAPI.removeNoticeUserCptTempChanged()
		},
		methods: {
			
			safeGet,
			
			locationChanged(location) {
				this.$emit('locationChanged', location)
			},
			scaleChanged(scale) {
				this.$emit('scaleChanged', scale)
			},
			
			configData() {
				window.electronAPI.userList('blood_bar_user_temp', this.cpt_id).then((users) => {
					let ctres = []
					this.left = null
					this.right = null
					for (let user of users) {
						if (user.user_cpt_temp && user.user_cpt_temp.position == 1) {
							if (user.show == 1) {
								this.left = user
							} else {
								this.left = null
							}
						}
						if (user.user_cpt_temp && user.user_cpt_temp.position == 2) {
							if (user.show == 1) {
								this.right = user
							} else {
								this.right = null
							}
						}
					}
				})
			},
			
			formatTime(seconds) {
				const mins = Math.floor(seconds / 60);
				const secs = seconds % 60;
				const pad = n => n.toString().padStart(2, '0');
				return `${pad(mins)}:${pad(secs)}`;
			}
		}
	}
</script>

<style scoped>

.sin {
	display: flex;
	flex-direction: row;
}

.sin-tx {
	margin-right:20px;
	text-align: center;
	position:relative;
}

.tx {
	width: 50px;
	position: relative;
	margin: 0 auto;
}

.tx-img {
	width: 46px;
	height: 46px;
	margin: 0 auto;
	border-radius: 50px;
	border: 2px solid #fff;
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 1);;
}

.ls {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	border-radius: 12px;
	background-color:rgb(252, 43, 117,0.8);
	font-size: 12px;
	color: #fff;
	z-index: 999;
	padding-bottom: 2px;
}

.name {
	font-size: 14px;
	color: #fff;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
	max-width: 5em;  /* 6个汉字的近似宽度 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 3px;
}

.blood-right {
	flex: 1;
}

.blood-sin {
	display: flex;
	margin-top: 10px;
	flex: 1;
	flex-direction: row;
}

.sin-left {
	width: 40%;
	display: flex;
	background: linear-gradient(to right, rgba(255, 36, 66, 0), /* 完全透明 */ rgba(255, 36, 66, 0.6) /* 完全不透明 */);
	align-items: center;
	border-radius: 0 30px 30px 0;
	justify-content: flex-end;
}

.sin-text {
	margin: 0 18px 0 18px;
	font-size: 18px;
	color: #fff;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}

.sin-gift {
	width: 40px;
	height: 40px;
}

.time {
	flex: 1;
	text-align: center;
	line-height: 1.3;
	font-size: 16px;
	color: #fff;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}

.sin-right {
	width: 40%;
	display: flex;
	flex-direction: row;
	background: linear-gradient(to right,
	    rgba(61, 149, 237, 0.6),  /* 完全透明 */
	    rgba(61, 149, 237, 0)   /* 完全不透明 */
	  );
	align-items: center;
	border-radius: 30px 0 0 30px;
	margin: ;
}
</style>